<template>
  <div class="search">
    <div id="container" class="map" tabindex="0"></div>
  </div>
</template>
<script>
import AMap from 'AMap'
import {getInspectionMap} from '@/services/model/investigation'
import constUrl from '@/services/env'
import Vue from 'vue'
import PictureViewer from '@/components/picture-viewer'

export default {
  data() {
    return {
      map: null, // 地图实例model
      cluster: null, // 点聚合实例model
      points: [],
      infoWindow: null,
      constUrls: '',
      zooms: 4,
    }
  },
  methods: {
    // 初始化地图
    initMap() {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        center: [110, 38],
        zoom: this.zooms,
        mapStyle: 'amap://styles/dark'
      })

      this.getMarks()
    },
    // markers与窗体信息
    getMarks() {
      // 信息窗口
      this.constUrls = constUrl
      let _this = this
      let content =
        `<el-card class="box-card">
          <div>
             <a @click="btnClose" class="btn-close amap-ui-infowindow-close amap-ui-smp-ifwn-def-tr-close">&#10006;</a>
                <ul>
                <li><span>路线名称：</span><span style="background-color: #a61b29;padding:3px">{{windowInfoData.roadName}}</span></li>
                <li><span>标段名称：</span><span style="background-color: #a61b29;padding:3px">{{windowInfoData.roadSectionName}}</span></li>
                <li><span>点位名称：</span><span>{{windowInfoData.name}}</span></li>
                <li><span>当前风险等级：</span><span style="background-color: #a61b29;padding:3px">{{windowInfoData.nowRiskLevelName}}</span></li>
                </ul>
        <!-- 查看大图 -->
        </div>
        </el-card>`
        let MyComponent = Vue.extend({
        template: content,
        components: {PictureViewer},
        data() {
        return {
        constUrl: '',
        msg: '边坡详情',
        }
        },
        props: {
        windowInfoData: {
        type: Object
        }
        },
        methods: {
        seeDetail (type,slopeId) {
        _this.$router.push({
        name: 'slope-paicha-form',
        params: {investigateType: type,slopeId:slopeId}
        })
        },
          // 查看大图
        previewImg(index, urls) {
        const urlList = JSON.parse(JSON.stringify(urls))
        urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
        })
        this.$refs.imageViewer.showViewer(urlList, index)
        },
        toControl(val, projectId) {
        _this.$router.push({
        path: `

        /project/$
          {
            projectId
          }
        /work-point/$
          {
            val.workPointId
          }
        /monitor/$
          {
            val.monitorType
          }
        ?activeId=$
          {
            val.id
          }

      `
      })
      },
      btnClose() {
      _this.infoWindow.close(_this.map)
      },
      },
      created() {
      this.constUrl = _this.constUrls
      },
      mounted() {
      }
      })
        // markers与信息窗体
      var cluster
      var markers = []

      markers = this.points.map(x => {
      let bgColor = '#0DC26B'
        let view = ''
        let height = ''
      if (x.nowRiskLevel === 0) { // marker背景色
      bgColor = '#0DC26B'
      } else if (x.nowRiskLevel === 1) {
      bgColor = '#0073b7'
      } else if (x.nowRiskLevel === 2) {
      bgColor = '#f39c12'
      } else if (x.nowRiskLevel === 3) {
      bgColor = '#ff851b'
        view = 'blink'
        height = '5px'
      } else if (x.nowRiskLevel === 4) {
      bgColor = '#e43321'
        view = 'blink'
        height = '5px'
      }
      const marker = new AMap.Marker({
      position: [x.longitude, x.latitude],
      content: `
        <div class="${view}" style="background-color:${bgColor}
        ;font-size:12px;color:#ffffff;text-align:center;line-height:${height}; height: 24px; width: 100px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">${x.nowRiskLevelName}
        </div>`,
    imageOffset: new AMap.Pixel(-15, -15),
    extData: x,
    iconLabel: 'test'
    })
      // 监听单个点点击事件
    AMap.event.addListener(marker, 'click', e => {
      // 窗体信息
    let component = new MyComponent({ // 传参
    propsData: {
    windowInfoData: marker.G.extData
    }
    }).$mount()
    this.infoWindow = new AMap.InfoWindow({
    content: component.$el, // 使用默认信息窗体框样式，显示信息内容
    isCustom: true,
    autoMove: true,
    closeWhenClickMap: true,
    retainWhenClose: true,
    offset: new AMap.Pixel(0, -15),
    })
    this.infoWindow.open(
    this.map,
    marker.getPosition(e.lnt, e.lat)// 窗口信息的位置
    )
    })
    return marker
    })
    if (this.$route.params.projectId) {
    this.map.setFitView(markers)// 自适应显示点标记
    this.map.setZoom(12) // 设置地图层级
    }
    this.addCluster(markers, cluster)
    },
    // marks样式
    addCluster(markers, cluster) {
      if (cluster) {
        cluster.setMap(null)
      }
      // 自定义图标
      var sts = [{
        url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-16, -16)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/green.png',
        size: new AMap.Size(32, 32),
        offset: new AMap.Pixel(-16, -16)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/orange.png',
        size: new AMap.Size(36, 36),
        offset: new AMap.Pixel(-18, -18)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/red.png',
        size: new AMap.Size(48, 48),
        offset: new AMap.Pixel(-24, -24)
      }, {
        url: 'https://a.amap.com/jsapi_demos/static/images/darkRed.png',
        size: new AMap.Size(48, 48),
        offset: new AMap.Pixel(-24, -24)
      }]
      AMap.plugin(['AMap.MarkerClusterer'], () => {
        cluster = new AMap.MarkerClusterer(this.map, markers, {
          styles: sts,
          gridSize: 80,
        })
      })
    },
    // 获取数据
    async getMapList(form) {
      const {data} = await getInspectionMap(form)
      this.points = data || []
      this.initMap()
    },
  },
  created() {

  },
  mounted() {
    // this.getMapList()
  },
}
</script>

<style lang="less" scoped>
  .search {
    height: 100%
  }

  .map {
    width: 100%;
    height: 100%;
  }

  /deep/ .box-card {
    width: 520px;

    .btn-close {
      float: right;
      cursor: pointer;
      margin-left: 10px;
    }

    .title {
      font-size: 16px;
      clear: both;
      background-color: #1990FE;
      margin-bottom: 15px;
      padding: 9px;
      color: white;
      border-radius: 5px;
    }

    .el-card__body {
      background-color: #2a2a2a;
      color: white;
    }


    .info-btn {
      margin-top: 15px;
      margin-left: 20px;
      margin-bottom: 5px;

      .btn-item {
        margin-bottom: 7px;
        margin-right: 7px;
      }

      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
    }

    ul li {
      font-size: 18px;
      line-height: 30px;
      border-bottom: 1px solid white;

      span:first-child {
        font-weight: bold;
      }
    }
  }
  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.4;
    }
    to {
      opacity: 1.0;
    }
  }

  @-webkit-keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.7;
    }
    to {
      opacity: 1.0;
    }
  }

  .blink {
    color: white;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
  }
</style>
